<template>
  <div>{{ count }}</div>
  <button @click="count++">添加count</button>
  <hr>
  <div>学生{{student.name}}已经{{student.info.age}}岁了</div>
  <button @click="student.info.age++">过生日</button>
  <button @click="student.name = 'jack'">改名</button>
</template>


<script setup>
import { reactive, ref, watch } from 'vue'

const count = ref(0)
// 监听每当 count 发生变化, 就出发后续回调函数
// 基本用法是两个参数, 1. 监听目标, 2. 触发后回调
watch(count, (newVal, oldVal) => {
  console.log('数据发生了变化', newVal, oldVal);
})

const student = reactive({
  name: 'tom',
  info: {
    gender: '男',
    age: 18
  }
})
// 同时监听多个响应式数据
watch([count, student], (newVal, oldVal) => {
  console.log('count 或 student 发生了变化', newVal, oldVal);
})
// 可以单独对某一项对象属性进行监听
watch(()=>student.name, () => {
  console.log('这里只有学生名字发生改变才会触发');
})

</script>